  <template>
  <div>
    <van-nav-bar
        title="工单详情"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <div class="content">
      <van-cell-group>
        <van-cell title="工单类型" :value="this.order.type" />
        <van-cell title="工单状态" :value="this.order.status"/>
        <van-cell title="项目名称" :value="this.order.engineer_name"/>
        <van-cell title="设备名称" :value="this.order.device_name"/>
        <van-cell title="申报原因" :value="this.order.bill_why === null?'无':this.order.bill_why"/>
        <van-cell title="完成图片" :value="endpic.length === 0?'暂无图片':null"/>
        <img v-for="(item, index) in endpic" :key="index" :src="item" style="width: 100px"></img>

      </van-cell-group>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
import { mapState } from "vuex";
import { Dialog, Notify } from "vant";
export default {
  data() {
    return {
      order: {},
      engineer: {
        engineer_id: null,
        page: 1,
        pageSize: 1,
      },
      endpic: []
    };
  },
  computed: {
    ...mapState("user", ["info"]),
  },
  methods: {
    // 根据id查询工单详情
    findWorkerOrderById(engineer_id) {
      get("/workorder/pageQuery", this.engineer).then((res) => {
        this.order = res.data.list[0];
        this.endpic = res.data.list[0].end_photos;

      });
    },
  },
  created() {
    this.engineer.engineer_id = this.$route.query.id;
    // 执行根据id查询工单数据的方法
    this.findWorkerOrderById(this.engineer_id);
  },
};
</script>
<style scoped>
.content {
  padding: 15px;
}
</style>
